<template>
  <div>
    <div class="title">新增活动信息</div>
    <div class="content">
      <div>
        <div class="subtitle">基本信息</div>
        <div class="subContent clear">
          <div class="float">
            <div class="inputBox">
              <span class="inputTitle"><span class="redStar">*</span>活动名称：</span>
              <el-input
                      type="text"
                      placeholder="请输入活动名称"
                      maxlength="15"
                      show-word-limit
                      v-model="activeName"
              >
              </el-input>
            </div>
            <div class="inputBox">
              <span class="inputTitle"><span class="redStar">*</span>活动头图：</span>
              <el-upload
                      action="https://jsonplaceholder.typicode.com/posts/"
                      list-type="picture-card"
                      style="display: inline-block;vertical-align: text-top"
                      :limit = 1
                      :on-change="changeAvatarUpload"
                      :on-preview="handlePictureCardPreview"
                      :auto-upload="false"
                      :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
              <div>
                <span style="display: inline-block;width: 180px"></span>
                请选择小于3M的jpg/png图片
              </div>
            </div>
            <div class="inputBox">
              <span class="inputTitle"><span class="redStar">*</span>活动背景颜色：</span>
              <el-color-picker style="vertical-align: middle" v-model="color"></el-color-picker>
            </div>
          </div>
          <div class="float">
            <div class="inputBox">
              <span><span class="redStar">*</span>活动时间：</span>
              <el-date-picker
                      v-model="value1"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <div class="inputBox">
              <span><span class="redStar">*</span>活动状态:</span>
              <el-radio v-model="radio" label="1" style="margin-left: 20px">上线</el-radio>
              <el-radio v-model="radio" label="0">下线</el-radio>
            </div>
          </div>
        </div>
        <div>
          <span class="inputTitle"><span class="redStar">*</span>活动规则：</span>
          <el-input
                  type="textarea"
                  v-model="activeRule"
                  placeholder="请输入使用说明"
                  maxlength="500"
                  show-word-limit
                  :autosize="{ minRows: 4}"
          >
          </el-input>
        </div>
      </div>
      <div>
        <div class="subtitle">分享设置</div>
        <div class="subContent clear">
          <div class="float">
            <div class="inputBox">
              <span class="inputTitle"><span class="redStar">*</span>是否允许用户分享：</span>
              <el-select v-model="value">
                <el-option
                        v-for="item in boolOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="float">
            <div class="inputBox">
              <span class="inputTitle"><span class="redStar">*</span>分享标题：</span>
              <el-input
                      :disabled="value==0?true:false"
                      type="text"
                      placeholder="请输入分享标题"
                      maxlength="15"
                      show-word-limit
                      v-model="shareTitle"
              >
              </el-input>
            </div>
          </div>
        </div>
        <div class="inputBox">
          <span class="inputTitle"><span class="redStar">*</span>分享文案：</span>
          <el-input
                  :disabled="value==0?true:false"
                  type="textarea"
                  v-model="share"
                  placeholder="请输入分享文案"
                  maxlength="500"
                  show-word-limit
                  style="vertical-align: text-top"
                  :autosize="{ minRows: 4}"
          >
          </el-input>
        </div>
        <div class="inputBox">
          <span class="inputTitle"><span class="redStar">*</span>分享图片：</span>
          <el-upload
                  :disabled="value==0?true:false"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  style="display: inline-block;vertical-align: text-top"
                  :limit = 1
                  :on-change="changeAvatarUpload2"
                  :on-preview="handlePictureCardPreview2"
                  :auto-upload="false"
                  :on-remove="handleRemove2">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible2">
            <img width="100%" :src="dialogImageUrl2" alt="">
          </el-dialog>
        </div>
        <div>
          <span style="display: inline-block;width: 180px"></span>
          请选择小于3M的jpg/png图片
        </div>
      </div>
      <div class="btnBox">
        <div class="trueBtn" @click="tijiao">确定</div>
        <div class="cancelBtn" @click="rest">重置</div>
      </div>
    </div>
  </div>
</template>

<script>
    import api from '../../tool/api'
    import axios from 'axios'
    export default {
        name: "couponActive",
        data(){
            return{
                activeName:'',
                value1:'',
                radio:'1',
                activeRule:'',
                value:1,
                boolOptions:[
                    {
                        value: 1,
                        label: '是'
                    },
                    {
                        value: 0,
                        label: '否'
                    }
                ],
                color:'',
                shareTitle:'',
                share:'',
                dialogVisible:false,
                dialogVisible2:false,
                dialogImageUrl:'',
                dialogImageUrl2:'',
                fileList:[],//存储即将上传得base64
            }
        },
        methods:{
            /***
             * @returns {Boolean}
             */
            validate(){
                let map = {
                    activeName:'请输入活动名称',
                    value1:'请选择活动时间',
                    color:'请选择活动背景颜色',
                    activeRule:'请输入活动规则',
                };
                let map2 = {
                    activeName:'请输入活动名称',
                    value1:'请选择活动时间',
                    color:'请选择活动背景颜色',
                    activeRule:'请输入活动规则',
                    shareTitle:'请输入分享标题',
                    share:'请输入分享文案'
                };


                if (this.value==1) {
                    for(let key in map2){
                        if(!this[key]){
                            this.$message.error(map2[key]);
                            return false;
                        }
                    }
                    if(this.fileList.length!==2){
                        this.$message.error('请选择图片');
                        return false
                    }
                }
                if(this.value == 0){
                    for(let key in map){
                        if(!this[key]){
                            this.$message.error(map[key]);
                            return false;
                        }
                    }
                    if(this.fileList.length!==1){
                        this.$message.error('请选择图片');
                        return false
                    }
                }

                return true;
            },
            tijiao(){
                if(!this.validate()) return;
                let [startDate,endDate] = this.value1;
                let shareTitle = this.shareTitle;
                let share = this.share;
                if (!this.shareTitle) {
                    shareTitle=null
                }else if (!this.share) {
                    share=null
                }
                let user = sessionStorage.getItem('backUserId')
                axios({
                    url: api.tt_createActive,
                    method: 'post',
                    data: {
                        activityInfoRule: this.activeRule,
                        activityInfoBackground: this.color,
                        activityInfoBeginTime: startDate,
                        activityInfoEndTime: endDate,
                        activityInfoImg: this.fileList[0],
                        activityInfoName: this.activeName,
                        activityInfoStatus: Number(this.radio),
                        activityShareSetting: {
                            activityShareIsAllow: this.value,
                            activityShareContent: share,
                            activityShareTitle: shareTitle,
                            activityShareImg: this.fileList[1]
                        },
                        userId: Number(user)
                    }
                }).then(res => {
                    this.$message.success('创建成功')
                }).catch(err => {
                    this.$message.error('创建失败')
                })

            },

            rest(){
                // this.activeName='';
                // this.value1='';
                // this.color='';
                // this.shareTitle='';
                // this.share='';
                // this.fileList=[];
                // this.radio='1';
                // this.value=1;
                this.$router.go(0);
            },

            handleAvatarSuccess(res, file) {

            },

            changeAvatarUpload(file,fileList){
                const overFile = file.raw;
                const isPic = overFile.type === 'image/jpeg' || overFile.type ==='image/png';
                const isLt3M = file.size / 1024 / 1024 < 3;
                if (!isPic) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt3M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                if(! isPic && isLt3M)return;
                this.pic2base64(overFile).then(res=>{
                    this.fileList.unshift(res);
                })
            },

            changeAvatarUpload2(file,fileList){
                const overFile = file.raw;
                const isPic = overFile.type === 'image/jpeg' || overFile.type ==='image/png';
                const isLt3M = file.size / 1024 / 1024 < 3;
                if (!isPic) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt3M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                if(! isPic && isLt3M)return;
                this.pic2base64(overFile).then(res=>{
                    this.fileList.push(res);
                })
            },

            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

            handlePictureCardPreview2(file){
                this.dialogImageUrl = file.url;
                this.dialogVisible2 = true;
            },

            handleRemove(file){
                this.pic2base64(file.raw).then(res=>{
                    this.fileList.splice(res,1)
                })
            },

            handleRemove2(file){
                this.pic2base64(file.raw).then(res=>{
                    this.fileList.splice(res,1)
                })
            },

            pic2base64(file){
                return new Promise((resolve,reject)=>{
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.addEventListener("load", function () {
                        // console.log(reader.result);
                        resolve(reader.result)
                    }, false);
                })
            }
        }
    }
</script>


<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<style scoped lang="less">
  .title{
    padding: 20px 10px;
    border-bottom: 1px solid #c0c0c0;
  }
  .content{
    padding: 10px 40px;
  }
  .subtitle{
    color: #0066FF;
    padding: 20px 0;
  }
  .inputBox{
    margin: 20px 0;
  }
  .inputTitle{
    display: inline-block;
    width: 180px;
    text-align: right;
  }
  .redStar{
    font-size: 18px;
    color: red;
  }
  .float{
    float: left;
    margin-right: 50px;
  }
  .clear:after{
    content: "";
    display: block;
    clear: both;
  }
  .el-input{
    width: 300px;
  }
  .el-textarea{
    width: 500px;
    vertical-align: text-top;
  }
  .littleInput{
    width: 50px;
    margin: 0 10px;
  }
  .radioBox{
    display: inline-block;
    vertical-align: middle;
  }
  .radioOption{
    margin: 20px 0;
  }
  .btnBox{
    display: flex;
    justify-content: center;
  }
  .trueBtn{
    display: inline-block;
    padding: 10px 20px;
    background-color: #409EFF;
    color: white;
    border-radius: 10px;
    margin: 0 20px;
    cursor: pointer;
  }
  .cancelBtn{
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.56);
    border-radius: 10px;
    cursor: pointer;
  }
</style>